<template>
  <div class="flex items-center justify-center">
    <MoleculeContractListCardContainer
      v-if="
        contactStore.contactList.length > 0 && !contactStore.contactListPending
      "
      :contact-list="contactStore.contactList"
    />
    <AtomSpinner110
      v-else-if="contactStore.contactListPending"
      class="absolute top-1/2"
    />
    <AtomContactsNotFound v-else />
  </div>
</template>

<script setup lang="ts">
import { useContactsStore } from '~/stores/contactsStore'
import { useFilterStore } from '~/stores/filterStore'
import { useUserStore } from '~/stores/userStore'

const contactStore = useContactsStore()
const filterStore = useFilterStore()
const userStore = useUserStore()

watch(
  filterStore.filter,
  () => {
    contactStore.getContactList(filterStore.filter)
  },
  {
    deep: true
  }
)

watch(
  () => userStore.pendingOrNeedFetchUserInfo,
  () => {
    if (!userStore.pendingOrNeedFetchUserInfo) {
      contactStore.getContactList(filterStore.filter)
    }
  }
)
</script>
